<extend name="Base/common" />

<block name="style">
	<link rel="stylesheet" type="text/css" href="__PUBLIC__/Api/css/main.css">
</block>

<block name="Content">

<div class="page-group">
    <div class="page page-current">
        <form action="{:U('Orders/order')}" method="post" id="orderform">
            <div class="bar bar-standard bar-footer normal-server-footer">
                <!--提交按钮-->
                <div class="choose-submit">
                    <div class="content-block">
                        <div class="row">
                            <div class="col-50">
                            	<a href="#" onclick="changeParam('2')" class="button button-big button-fill button-danger">指定小哥</a>
                            </div>
                            <div class="col-50">
                            	<button type="button" onclick="order()" class="button button-big button-fill button-success">提交订单</button>
                            </div>
                        	
                        	<input type="hidden" name="address_id" id="address_id" value="{$addressModel['address_id']}"/>
                        	<input type="hidden" name="record_id" id="record_id" value="{$record_id}"/>
                        	<input type="hidden" name="worker_id" id="worker_id" value="{$workerModel['worker_id']}"/>
                        	<input type="hidden" name="site_id" id="site_id" value="{$site_id}"/>
                        	<input type="hidden" name="chargePrice" id="chargePrice" value="{$chargePrice|default='0'}"/>
                        	<input type="hidden" name="appointment" id="appointment" value="{$appointment}"/>
                        	<input type="hidden" name="emergency" id="emergency" value="{$emergency|default='1'}"/>
                        	<input type="hidden" name="delay" id="delay" value="{$delay}"/>
                        	<input type="hidden" name="detail_id" id="detail_id" value="{$detail_id}"/>
                        	<input type="hidden" name="class_id" id="class_id" value="{$class_id}"/>
                        	<input type="hidden" name="type" id="type" value="2"/>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content native-scroll">
                <div class="normal-server">
                    <div class="list-block media-list">
                        <ul>
                            <li>
                                <a href="#" onclick="changeParam('1')" class="item-link item-content">
                                    <div class="item-inner">
                                        <div class="service clearfix">
                                            <div class="service-name"><span>联系人 : </span><span>{$addressModel['contact']}</span></div>
                                            <div class="service-phnoe"><span>联系电话 : </span><span>{$addressModel['telphone']}</span></div>
                                        </div>
                                        <div class="service clearfix">
                                            <div class="service-address">
                                            	<span class="service-address-1">维修地址 : </span>
                                            	<span class="address-info">{$addressModel['address']}</span>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="order-box">
                        <div class="buttons-tab">
                            <a href="#tab1" class="tab-link button active">预约服务</a>
                            <a href="#<if condition='$detailModel.emergency eq 1'>tab2</if>" class="tab-link button">紧急服务</a>
                        </div>
                        <div class="tabs">
                        	<notempty name="workerModel">
                        		<p>预约小哥 {$workerModel['name']} 服务时间为 {$appointment|MyDate='',###}
                        	<else/>
	                            <div id="tab1" class="tab active">
	                                <div class="scheduling">
	                                    <div class="scheduling-title clearfix">
	                                        <div>请选择预约时间</div>
	                                        <div>已过期</div>
	                                        <div></div>
	                                        <div>已选中</div>
	                                        <div></div>
	                                    </div>
	                                    <div class="scheduling-info ">
	                                        <ul class="scheduling-date clearfix">
	                                            <notempty name="dateList">
			           								<volist name="dateList" id="date" key="k">
			                                			<li>
			                                				<input type="hidden" value='{$date["tlist"]}'/>
			                                				<input name="day" type="radio" <if condition="$k eq '1'">checked</if>>
			                                				<span>{$date['timestamp']|date='m/d',###}</span>
			                                			</li>
			                                		</volist>
			                                	</notempty>
	                                        </ul>
	                                        <ul class="scheduling-time clearfix" id="timeList">
	                                        </ul>
	                                    </div>
	                                </div>
	                            </div>
	                            <div id="tab2" class="tab">
	                                <ul class="color-box-time clearfix">
	                                    <li><input name="minute" type="radio" value="20"><span>20分钟</span></li>
	                                    <li><input name="minute" type="radio" value="30"><span>30分钟</span></li>
	                                    <li><input name="minute" type="radio" value="40"><span>40分钟</span></li>
	                                    <li><input name="minute" type="radio" value="50"><span>50分钟</span></li>
	                                </ul>
	                            </div>
                            </notempty>
                        </div>
                        
                        <div class="server-message server-message-top">
                            <label for="server-message">备注 : </label>
                            <input type="text" name="remark" id="remark" placeholder="给小哥留言" id="server-message">
                        </div>
                        <!--上传维修部位照片-->
                        <div class="upload-pic">
                            <div class="upload-title">上传维修部位的图片</div>
                            <div class="pic-list clearfix" id="imageList">
                            	<notempty name="recordList">
       								<volist name="recordList" id="record" key="k">
       									<div>
       										<span>
       											<img class="preview" src="{$record['fullpath']}">
       											<a href="#" onclick="del(this)" rid="{$record['record_id']}"
       												fullpath="{$domain}{$record['fullpath']}" serverID="{$record['media_id']}">
       												<img src="./Public/Api/images/upload-delete-btn.png">
       											</a>
       										</span>
       									</div>
       								</volist>
       							</notempty>
       							<if condition="count($recordList) egt 9">
       							<else/>
                                	<div class="upload-btn" id="chooseImage"></div>
                               	</if>
                            </div>
                            <div class="upload-description">请您至少上传3张位置图片，方便小哥初步了解问题</div>
                        </div>
                        <!--推荐小哥-->
                        <div class="recommends-worker">
                            <div class="recommends-title">推荐小哥</div>
                            <notempty name="workerList">
	                            <div class="worker-list clearfix">
	                                <div class="swiper-container">
	                                    <div class="swiper-wrapper">
	                                    	
	               								<foreach name="workerList" item="worker">
	               								
	               									<div class="swiper-slide">
			                                            <div class="pic-box"
			                                            	onclick="javascript:window.location.href='{:U('Worker/viewAction', 'worker_id='.$worker['worker_id'])}'">
			                                                <img src="{$worker['fullpath']|default='./Public/Api/images/zhidingxiaoge-pic.jpg'}">
			                                                <p>{$worker['name']}</p>
			                                            </div>
			                                        </div>
	               								</foreach>
	               							
	                                    </div>
	                                </div>
	                            </div>
                            <else/>
   								<div class="recommends-title">更多小哥即将入驻，敬请期待</div>
   							</notempty>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

</block>

<block name="script">
<script src="__PUBLIC__/Api/js/swiper.min.js" type="text/javascript"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="__PUBLIC__/Api/js/wechatapi.js" type="text/javascript"></script>
<script type="text/javascript">

//1.选择地址；2.选择小哥
function changeParam(type){
	
	if(type == 1){
		target = Think.U('UserAddress/index');
	}else{
		target = Think.U('Worker/orderWorker');
	}

	$(document).find('form').attr('action', target);
	$(document).find('form').submit();
}


//删除已上传的图片
function del(obj){
	
	var rid = $(obj).attr('rid');
	var path = $(obj).attr('fullpath');

	if(!isNaN(rid)){
		
		$(obj).closest('div').remove();
		var imgList = $("#record_id").val();
		rid = rid + ',';
		$("#record_id").val(imgList.replace(rid, ''));
		
		//previewImages.remove(path);
		$("#chooseImage").show();
	}
}

function order(){
	
	var addressID = $("#address_id").val();
	var emergency = $("#emergency").val();
	var appointment = $("#appointment").val();
	var delay = $("#delay").val();
	var detailID = $("#detail_id").val();
	var classID = $("#class_id").val();
	var chargePrice = $("#chargePrice").val();

	if(!detailID || !classID){
		window.location.reload();
	}else if(!addressID || isNaN(addressID)){
		$.alert('请选择地址');
		return false;
	}else if((emergency == 2 && (!delay || isNaN(delay))) || (emergency == 1 && (!appointment || isNaN(appointment)))){
		$.alert('请选择预约时间');
		return false;
	}
	
	var target = Think.U('Orders/order');
	
	if(!isNaN(chargePrice) && chargePrice > 0){
		
		$.confirm('超范围服务费：' + chargePrice + '元', function(){
			$(document).find('form').attr('action', target);
			$(document).find('form').submit();
		});
		
	}else{
		$(document).find('form').attr('action', target);
		$(document).find('form').submit();
	}
}

$(function () {
	
	//利用微信JS-SDK上传图片
	getJsApiConfig();

	$("input[name='day']").on('change', viewTime);
	$("input[name='appointtime']").live('change', function(){
		var timestamp = $("input[name='appointtime']:checked").val();
		$("#appointment").val(timestamp);
		$("#emergency").val('1');				//预约服务时为1
		$("#delay").val('');
	});
	$("input[name='minute']").live('change', function(){
		var minute = $("input[name='minute']:checked").val();
		$("#appointment").val('');
		$("#emergency").val('2');				//紧急服务时为2
		$("#delay").val(minute);
	});

	var loadRecord = true;
	
	if(loadRecord){
		var recordStr = $("#record_id").val();
		
		$.each($('#imageList div span').children('a'), function(key, val){
			var ridTemp = $(this).attr('rid');
			ridTemp = ridTemp + ',';
			
			recordStr = recordStr.replace(ridTemp, '');
		});
		
		//解决问题：用户上传维修部位图片后，点击某一推荐小哥信息并使用浏览器“返回”按钮返回本页面后上传的图片不显示
		if(recordStr != ''){
			var rlistTarget = Think.U('Orders/ajax_recordList');
			
			$.post(rlistTarget, {'rstr':recordStr}, function(data){
				
				var html = '';
				
				if(data.status == 1){
					
					$.each(data.info, function(key, val){
						
						html += '<div><span><img class="preview" src="' + val['fullpath'] + '">';
						html += '<a href="#" onclick="del(this)" rid="' + val['record_id'] + '" ';
						html += ' fullpath="'+ val['fullpath'] + '" serverID="' + val['media_id'] + '">';
						html += '<img src="./Public/Api/images/upload-delete-btn.png">';
						html += '</a></span></div>';
					});
					
					$("#imageList").prepend(html);
				}
			});
		}
		
		loadRecord = false;
	}
	
	viewTime();
	function viewTime(){
		
		var serialStr = $("input[name='day']:checked").prev().val();
		var hourArray = $.parseJSON(serialStr);
		
		var html = '';
		
		$.each(hourArray, function(key, val){
			
			var disabled = '';
			var ordered = '';
			var checked = '';
			
			if(val['status'] == '1'){
				disabled = ' disabled ';
			}else if(val['status'] == '2'){
				ordered = ' class="ordered" ';
				disabled = ' disabled ';
			}else if(val['status'] == '3'){
				checked = ' checked ';
			}
			
			html += '<li' + ordered + '><input name="appointtime" value="' + val['timestamp'] + '" type="radio" ' + disabled + 
					checked + ' ><span>' + formatHour(val['timestamp']) + '</span></li>';
		});
		
		$("#timeList").html(html);
	}
	
	function formatHour(timeStamp){
		
		var localTime = new Date(timeStamp * 1000);
		var hour = localTime.getHours();

		return hour + ':00';
	}
	
});


var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    slidesPerView: 3,
    paginationClickable: true,
    spaceBetween: 30
});
</script>
</block>

